<!-- 商圈管理 -->
<template>
  <page-header-wrapper>
    <a-card class="table-card">
      <GzSearchForm :searchFunc="searchFunc" :resetFunc="onReset" searchConditionNum="6">
        <gz-text-up v-model:value="searchData['searchText']" :placeholder="'商圈编号/商圈名称'" />
        <gz-text-up v-model:value="searchData['searchText']" :placeholder="'商圈类型编号/类型名称'" />

        <!-- <GzProxySelect :placeholder="'归属机构'" v-model:value="searchData['agentNo']" /> -->

        <a-form-item label="" class="table-search-item">
          <a-select v-model:value="searchData['platform']" placeholder="是否启用">
            <a-select-option value="">
              全部
            </a-select-option>
            <a-select-option value="1">
              是
            </a-select-option>
            <a-select-option value="0">
              否
            </a-select-option>
          </a-select>
        </a-form-item>
      </GzSearchForm>

      <!-- 列表渲染 -->
      <GzTable
        ref="infoTableRef"
        :init-data="true"
        :req-table-data-func="reqTableDataFunc"
        :table-columns="tableColumns"
        :search-data="searchData"
        
        row-key="groupId"
      >
        <template #topBtnSlot>
          <a-button type="primary" @click="addFunc">
            <plus-outlined />新建
          </a-button>
          <a-button type="primary" @click="exportFunc">
            <export-outlined />导出
          </a-button>
        </template>

        <template #headerCell="{ column }">
          <template v-if="column.key === 'mchYxNum'">
            <a-tooltip>
              <template #title>符合商圈位置判断、商户状态为开启的商户</template>
              <span>
                商圈有效商户数<info-circle-outlined />
              </span>
            </a-tooltip>
            
          </template>
        </template>

        <template #bodyCell="{ column, record }"> 
          <template v-if="column.key.split('.')[0] === 'num'">
            <a>{{ record[column.key.split('.')[1]] || '' }}</a>
          </template> 
          <template v-if="column.key === 'operation'">
            <!-- 操作列插槽 -->
            <GzTableColumns>
              <a-button type="link" @click="editFunc(record.groupId)">编辑</a-button>
              <a-button type="link">商户导入</a-button>
              <a-button type="link">商户导入记录</a-button>
              <a-button type="link">商户解绑</a-button>
              <a-button type="link">商户解绑记录</a-button>
              <a-button type="link">商户明细</a-button>
              <a-button type="link">活动明细</a-button>
              <a-button type="link">操作记录</a-button>
              <a-button type="link">删除</a-button>
            </GzTableColumns>
          </template>
        </template>
      </GzTable>
    </a-card>
  </page-header-wrapper>
  <!-- 选择活动平台以及类型 -->

  <!-- 新增页面组件  -->
  <InfoAddOrEdit ref="infoAddOrEdit" :callback-func="searchFunc" />

</template>

<script lang="ts" setup>

import { API_URL_MARKETING_LIST, API_URL_MARKETING_PROXY_LIST,req } from '@/api/manage'
import { ref, reactive, getCurrentInstance ,onMounted} from 'vue'
import InfoAddOrEdit from './AddOrEdit.vue'
import router from '@/router'
import dayjs from 'dayjs'
import {useUserStore} from '@/store/modules/user'

const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties

// const AddOrEditRef = ref()

const infoTableRef = ref()
let tableColumns = reactive([
  { key: 'cityName', title: '商圈所属地市',dataIndex: 'cityName',fixed: 'left', width: 120 },
  { key: 'areaName', title: '商圈所属区县',dataIndex: 'areaName',fixed: 'left', width: 120 },
  { key: 'agentName', title: '商圈所属网点',dataIndex: 'agentName',fixed: 'left', width: 140, minWidth: 140, maxWidth: 170 },
  { key: 'groupId', title: '商圈编号',dataIndex: 'groupId', width: 90},
  { key: 'groupName', title: '商圈名称',dataIndex: 'groupName', width: 140, minWidth: 140, maxWidth: 170 },
  { key: 'groupType', title: '类型名称', dataIndex: 'groupType',width: 100, minWidth: 80, maxWidth: 110 },
  { key: 'create', title: '创建人', dataIndex: 'create', width: 140, minWidth: 140, maxWidth: 170 },
  { key: 'update', title: '最后修改人', dataIndex: 'update', width: 140, minWidth: 140, maxWidth: 170 },
  { key: 'updateAt', title: '最后修改时间', dataIndex: 'updateAt',  width: 200, minWidth: 200, maxWidth: 230 },
  { key: 'state', title: '是否启用', dataIndex: 'state',  width: 90 },
  { key: 'num.mchNum', title: '商圈商户数', dataIndex: 'mchNum',align: "center", width: 140, minWidth: 140, maxWidth: 170 },
  { key: 'num.mchYxNum', title: '商圈有效商户数', dataIndex: 'mchYxNum',align: "center", width: 150, minWidth: 150, maxWidth: 170  },
  { key: 'num.radius', title: '商圈辐射范围', dataIndex: 'radius',align: "center", width: 140, minWidth: 140, maxWidth: 170 }, 
  { key: 'num.acticityNum', title: '累计活动数', dataIndex: 'acticityNum',align: "center", width: 140, minWidth: 140, maxWidth: 170 }, 
  { key: 'num.acticityIngNum', title: '进行中活动', dataIndex: 'acticityIngNum',align: "center", width: 140, minWidth: 140, maxWidth: 170 }, 
  { key: 'operation', title: '操作', dataIndex: 'operation',width: 260, fixed: 'right', align: 'center' }
])

const searchData = ref({})
const infoAddOrEdit = ref()

// 请求table接口数据
function reqTableDataFunc(params: any) {
  // var obj=Object.assign(params,{proxyNo:useUserStore().userInfo.belongInfoId})// 机构号
  // return req.list(API_URL_MARKETING_LIST, obj)
  return Promise.resolve({
    total: 1,
    records:[
      {
        cityName: '郑州市',
        areaName: '金水区',
        agentName: '丰产路营业所',
        groupId: '1',
        groupName: '宝龙商圈',
        groupType: '商业综合体',
        create:'admin',
        update:'admin',
        updateAt:'2023-12-08 11:20:22',
        state: 1,
        mchNum: 10,
        mchYxNum: 5,
        radius: 2000,
        acticityNum: 2,
        acticityIngNum: 1,
      }
    ]
  })
}

function searchFunc() {
  infoTableRef.value.refTable(true)
}

function onReset() {
  searchData.value = {}
}

function addFunc () { // 业务通用【新增】 函数
  infoAddOrEdit.value.show()
}
function editFunc (recordId: any) { // 业务通用【修改】 函数
  infoAddOrEdit.value.show(recordId)
}

onMounted(() => {

})

</script>
